iT邦幫忙

2023 iThome 鐵人賽

DAY 19
0
SideProject30

想要學 50 音!系列 第 19

[DAY-19] 說一下話吧!!

  • 分享至 

  • xImage
  •  

GitHub

我要學50音

  • 實作後的成果
  • 隨著每天的更新都會變化唷唷~~

用套件!

react-speech-recognition

  • install

    npm install --save react-speech-recognition

  • 支援語系

    • here{:target="_back"}

    • SpeechRecognition.startListening({ language: 'zh-CN' })

Day 19

import { Alert, Button, Grid, Typography } from "@mui/material";
import React, { useEffect, useState } from "react";
import SpeechRecognition, {
  useSpeechRecognition,
} from "react-speech-recognition";

//
// IMPORT ZONE
//

function Day19() {
  const { transcript, resetTranscript } = useSpeechRecognition();
  const [isBrowserSupportFlag, setIsBrowserSupportFlag] = useState(false);

  useEffect(() => {
    if (SpeechRecognition.browserSupportsSpeechRecognition()) {
      setIsBrowserSupportFlag(true);
    }
  }, []);

  const handleStartListenOnClick = () => {
    SpeechRecognition.startListening({ language: "ja" });
  };
  const handleStopListenOnClick = () => {
    SpeechRecognition.stopListening();
  };
  const handleReStartListenOnClick = () => {
    resetTranscript();
  };

  return (
    <Grid
      container
      spacing={{ mobile: 1, tablet: 2, laptop: 3 }}
      style={{ textAlign: "center" }}
    >
      <Grid item xs={12}>
        <h1>Day 19 說一下話吧!!</h1>
      </Grid>
      <Grid item xs={12}>
        {!isBrowserSupportFlag ? (
          <>
            {" "}
            <Alert severity="warning">哭哭!!!流臉泣不支援啦!!!</Alert>
          </>
        ) : (
          <Grid container>
            <Grid item xs={4}>
              {" "}
              <Button
                variant="contained"
                style={{ backgroundColor: "green", color: "snow" }}
                onClick={() => handleStartListenOnClick()}
              >
                {" "}
                開始聽
              </Button>
            </Grid>
            <Grid item xs={4}>
              {" "}
              <Button
                variant="contained"
                style={{ backgroundColor: "red", color: "snow" }}
                onClick={() => handleStopListenOnClick()}
              >
                {" "}
                停止
              </Button>
            </Grid>
            <Grid item xs={4}>
              {" "}
              <Button
                variant="contained"
                type="success"
                onClick={() => handleReStartListenOnClick()}
              >
                {" "}
                重新聽
              </Button>
            </Grid>
          </Grid>
        )}
      </Grid>
      <Grid item xs={12}>
        <Typography variant="h1" gutterBottom>
          {transcript}
        </Typography>
      </Grid>
    </Grid>
  );
}

export default Day19;

Reference


上一篇
[DAY-18] 永放不放棄!!!!!!!
下一篇
[DAY-20] 颱風假~~~~想放假 TAT!!!!!
系列文
想要學 50 音!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言